/*
 * @Description:
 * @Author: liyuhao
 * @Date: 2021-06-24 17:05:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-27 16:00:06
 */
import React from 'react'
import {createFromIconfontCN} from '@ant-design/icons'
import {
  getUrl,
  getPreviewUrl,
  getDeleteById,
} from '@/services/report'
import {useRequest} from 'ahooks'
import './index.less'

// 报告文件类型
export enum ReportFileTypeEnum {
  Docx = 1,
  Pdf
}

export interface ReportCardProps {
  style?: React.CSSProperties
  id?: React.Key
  date?: string
  dateType?: number
  reportName?: string
  fileName?: string
  handleRefresh?:any
}

const ReportIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2633862_3084r9ijjyd.js'
})

const ReportCard: React.FC<ReportCardProps> = props => {
  const {style, id, date, dateType, reportName, handleRefresh} = props
  const {
    run: runGetUrl
  } = useRequest((params: any) => getUrl(params).then((res: any) => {
    if (params.fileType === ReportFileTypeEnum.Pdf) {
      res && window.open(res)
    }
    if (params.fileType === ReportFileTypeEnum.Docx) {
      const elink = document.createElement('a')
      elink.style.display = 'none'
      elink.href = res
      document.body.appendChild(elink)
      elink.click()
      document.body.removeChild(elink)
    }
  }), {
    manual: true
  })

  const {
    run: runPreviewUrl
  } = useRequest(getPreviewUrl, {
    manual: true,
    onSuccess:(res:any)=> {
      res && window.open(res)
    }
  })

  const { run: runDelete } = useRequest(getDeleteById, {
    manual: true,
    onSuccess: () => {
      handleRefresh()
    }
  })


  const handlePreview = () => {
    runPreviewUrl({
      reportId: id
    })
  }
  const handleDownload = () => {
    runGetUrl({
      reportId: id,
      fileType: ReportFileTypeEnum.Docx
    })
  }
  const handleDelete = () => {
    runDelete({ id: id })
  }
  
  return (
    <div className='report-card' style={{
      ...style,
    }}>
      <div
        className='report-container'
        style={{
          backgroundSize:'100% 100%',
          backgroundImage: `url(https://shuzhi-static.tourage.cn/default/report/images/report-2.png)`
        }}
      >
        <p className='report-title'>{date}</p>
        <div className='report-info'>
          <div className='report-datetype'>{dateType}</div>
          <div className='report-name'>{reportName?.replace('佳县','')}</div>
        </div>
        <div className='report-operation'>
          {/* <div className='operation-container'>
            <div
              className={`operation preview`}
              onClick={handlePreview}
            >
              <span>预览</span>
            </div>
          </div> */}
          <div className='operation-container'>
            <div
              className={`operation donwload`}
              onClick={handleDownload}
            >
              <span>下载</span>
            </div>
          </div>
          <div className='operation-container'>
            <div
              className={`operation delete`}
              onClick={handleDelete}
            >
              <span>删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ReportCard
